<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/uploadifive/uploadifive.css" />
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="${pageContext.request.contextPath}/static/uploadifive/jquery.uploadifive.js"></script>
</head>
<body>
<div id="fileQueue"></div>
 <input id="file_upload" name="file_upload" type="file" multiple="false">
<script type="text/javascript">
	$(document).ready(function(){
		$('#file_upload').uploadifive({
            'auto': true,
            'multi': false,
            'width': '30%',
            'height': '35',
            'buttonText': '请选择图片',
            'fileType': 'image/jpg,image/jpeg,image/png',
            'fileSizeLimit': 1024,
            'queueSizeLimit': 1,
            'formData': {},
            'queueID': 'queue',
            'uploadScript': '${base}/open/file/upload/image',
            'onUploadComplete': function (file, data) {
                data = JSON.parse(data);
                if (data.code == 0) {
                    Toast.success(data.msg);
                    $("#img").html("<img src='" + data.data + "' style='width:150px;height:95px;'>");
                    $("#picurl").val(data.data);
                } else {
                    clearFile();
                    Toast.error(data.msg);
                }
            },
            'onDrop': function (file, fileDropCount) {
                clearFile();
            },
            'onClearQueue': function (queue) {
                clearFile();
            },
            'onCancel': function () {
                clearFile();
            }
        });
		function clearFile() {
	        $("#img").html("");
	        $("#queue").html("");
	        $("#picurl").val("");
	    }
	});  
</script>
	
	
</body>
</html>